<!--
 * 消息输入区域组件
 * 功能：提供消息输入、发送、附件上传、语音输入等功能
 * 作者：MetasoCreator Team
 * 创建时间：2025-01-19
 * 修改时间：2025-01-19
-->

<template>
  <div class="input-area">
    <div class="input-container">
      <!-- 输入框 -->
      <div class="input-wrapper">
        <el-input
          v-model="inputMessage"
          type="textarea"
          :placeholder="inputPlaceholder"
          :disabled="loading"
          :autosize="{ minRows: 1, maxRows: 6 }"
          resize="none"
          class="message-input"
          @keydown="handleKeydown"
          @input="handleInput"
          ref="inputRef"
        />
        
        <!-- 字数统计 -->
        <div v-if="showCharCount" class="char-count">
          {{ inputMessage.length }}/{{ maxLength }}
        </div>
      </div>

      <!-- 工具栏 -->
      <div class="input-toolbar">
        <!-- 左侧工具按钮 -->
        <div class="toolbar-left">
          <el-button
            size="small"
            text
            @click="handleAttach"
            :disabled="loading"
            title="添加附件"
          >
            <el-icon><Paperclip /></el-icon>
          </el-button>
          
          <el-button
            size="small"
            text
            @click="handleVoice"
            :disabled="loading"
            title="语音输入"
          >
            <el-icon><Microphone /></el-icon>
          </el-button>
          
          <el-button
            size="small"
            text
            @click="clearInput"
            :disabled="loading || !inputMessage.trim()"
            title="清空输入"
          >
            <el-icon><Delete /></el-icon>
          </el-button>
        </div>

        <!-- 右侧发送按钮 -->
        <div class="toolbar-right">
          <el-button
            type="primary"
            :loading="loading"
            :disabled="!canSend"
            @click="handleSend"
            class="send-button"
          >
            <el-icon v-if="!loading"><Promotion /></el-icon>
            <span>{{ loading ? '发送中...' : (props.mode === 'web_search' || props.mode === 'academic_search' ? '搜索' : '发送') }}</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 快捷提示 -->
    <div v-if="showQuickTips" class="quick-tips">
      <div class="tips-title">
        <el-icon><InfoFilled /></el-icon>
        <span>快捷提示</span>
      </div>
      <div class="tips-list">
        <el-tag
          v-for="tip in currentTips"
          :key="tip"
          size="small"
          class="tip-tag"
          @click="selectTip(tip)"
        >
          {{ tip }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import {
  Paperclip,
  Microphone,
  Delete,
  Promotion,
  InfoFilled
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  message: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: 'web_search'
  },
  maxLength: {
    type: Number,
    default: 2000
  }
})

// Emits
const emit = defineEmits(['update:message', 'send-message', 'search', 'attach', 'voice'])

// 响应式数据
const inputRef = ref(null)
const showQuickTips = ref(false)
const showCharCount = ref(false)

// 计算属性
const inputMessage = computed({
  get: () => props.message,
  set: (value) => emit('update:message', value)
})

const canSend = computed(() => {
  return inputMessage.value.trim().length > 0 && 
         inputMessage.value.length <= props.maxLength && 
         !props.loading
})

const inputPlaceholder = computed(() => {
  const placeholders = {
    web_search: '请输入您想搜索的内容...',
    academic_search: '请输入您要查找的学术内容...',
    qa: '请输入您的问题...',
    content_creation: '请描述您想要创作的内容...'
  }
  return placeholders[props.mode] || '请输入内容...'
})

const currentTips = computed(() => {
  const tips = {
    web_search: [
      '最新科技新闻',
      '今日热点事件',
      '股市行情分析',
      '天气预报查询'
    ],
    academic_search: [
      '人工智能研究进展',
      '机器学习算法比较',
      '深度学习应用案例',
      '自然语言处理技术'
    ],
    qa: [
      '如何提高工作效率？',
      '编程学习路径建议',
      '健康生活方式指南',
      '投资理财基础知识'
    ],
    content_creation: [
      '写一篇技术博客',
      '制作产品介绍文案',
      '撰写会议纪要',
      '创作营销方案'
    ]
  }
  return tips[props.mode] || []
})

// 方法
const handleInput = (value) => {
  showCharCount.value = value.length > props.maxLength * 0.8
  
  // 显示快捷提示
  if (value.trim().length === 0) {
    showQuickTips.value = true
  } else {
    showQuickTips.value = false
  }
}

const handleKeydown = (event) => {
  // Ctrl/Cmd + Enter 发送消息
  if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
    event.preventDefault()
    handleSend()
  }
  
  // Shift + Enter 换行（默认行为）
  if (event.shiftKey && event.key === 'Enter') {
    return
  }
  
  // Enter 发送消息（可配置）
  if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
    event.preventDefault()
    handleSend()
  }
}

const handleSend = () => {
  if (canSend.value) {
    emit('send-message', inputMessage.value.trim())
    inputMessage.value = ''
    showQuickTips.value = false
    showCharCount.value = false
  }
}

const handleAttach = () => {
  emit('attach')
}

const handleVoice = () => {
  emit('voice')
}

const clearInput = () => {
  inputMessage.value = ''
  showQuickTips.value = true
  showCharCount.value = false
  focusInput()
}

const selectTip = (tip) => {
  inputMessage.value = tip
  showQuickTips.value = false
  focusInput()
}

const focusInput = async () => {
  await nextTick()
  if (inputRef.value) {
    inputRef.value.focus()
  }
}

// 监听模式变化
watch(
  () => props.mode,
  () => {
    if (inputMessage.value.trim().length === 0) {
      showQuickTips.value = true
    }
  }
)

// 监听消息变化
watch(
  () => props.message,
  (newValue) => {
    if (newValue.trim().length === 0) {
      showQuickTips.value = true
    } else {
      showQuickTips.value = false
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.input-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.input-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.input-container:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.input-wrapper {
  position: relative;
  margin-bottom: 12px;
}

.message-input {
  width: 100%;
}

.message-input :deep(.el-textarea__inner) {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
}

.message-input :deep(.el-textarea__inner):focus {
  box-shadow: none;
}

.char-count {
  position: absolute;
  bottom: -20px;
  right: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.input-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.toolbar-left {
  display: flex;
  gap: 8px;
}

.toolbar-right {
  display: flex;
  gap: 8px;
}

.send-button {
  padding: 8px 20px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.send-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 快捷提示样式 */
.quick-tips {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  animation: slideUp 0.3s ease;
}

.tips-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.tips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tip-tag {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.tip-tag:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* 动画 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .input-container {
    padding: 12px;
  }
  
  .input-toolbar {
    flex-direction: column;
    gap: 8px;
  }
  
  .toolbar-left,
  .toolbar-right {
    width: 100%;
    justify-content: center;
  }
  
  .send-button {
    width: 100%;
  }
  
  .tips-list {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .input-container {
    padding: 10px;
  }
  
  .toolbar-left {
    justify-content: space-around;
  }
  
  .tip-tag {
    font-size: 12px;
  }
}

/* 暗色主题适配 */
:root[data-theme="dark"] .input-container {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .input-container:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

:root[data-theme="dark"] .quick-tips {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

:root[data-theme="dark"] .tip-tag:hover {
  background: var(--color-primary-dark);
  color: var(--color-primary-light);
}

/* 焦点状态 */
.message-input :deep(.el-textarea__inner):focus {
  outline: none;
}

/* 禁用状态 */
.input-container.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* 加载状态 */
.send-button.is-loading {
  pointer-events: none;
}
</style>